<template>
	<div>
		<HfTable :data-array="instruments || []" :default-sort="{ prop: 'InstrumentID' }" table-layout="fixed" :options="options" max-height="250" highlight-current-row @current-change="change"></HfTable>
	</div>
</template>

<script setup lang="ts">
import type { TableOptions } from '~/components/types'
const options: TableOptions[] = [
	{
		label: '合约',
		prop: 'InstrumentID',
		sortable: true,
		width: 120,
	},
	{
		label: '名称',
		prop: 'InstrumentName',
		sortable: false,
		width: 120,
	},
	{
		label: '品种',
		prop: 'ProductID',
		sortable: true,
		width: 120,
	},
	{
		label: '交易所',
		prop: 'ExchangeID',
		sortable: true,
		width: 120,
	},
	{
		label: 'PriceTick',
		prop: 'PriceTick',
		width: 120,
	},
	{
		label: '合约乘数',
		prop: 'VolumeMultiple',
		width: 120,
	},
	{
		label: '下市时间',
		prop: 'ExpireDate',
		width: 120,
	},
]
// 总是带上 instrument_id:ag2402的参数, 原因待查(useHttp.ts中L43)
const instruments = ref<InstrumentField[]>([])
const { data, refresh: refreshInstruments } = await useHttp.getLazy<InstrumentField[]>('/instrument', { product_class: '1' })
watch(data, (val) => {
	if (val) {
		instruments.value = val
	}
})
const change = (val: InstrumentField | undefined) => {
	if (val) useCookie('instrument').value = val.InstrumentID
}

onMounted(() => refreshInstruments())
</script>

<style scoped></style>
